<template>
  <div class="test1">
    <!-- header -->
    <div class="header">
      <div class="title">索菲玛汽车滤清器（重庆）有限公司</div>
      <div class="title_icon">
        <titleBar></titleBar>
      </div>
    </div>
    <!-- body -->
    <div class="body">
      <table>
        <tr>
          <td>
            <div class="area">
              <div class="title">机器</div>
              <vxe-table size="mini" :header-cell-class-name="getcolHeader" :row-class-name="getRow" :data="tableData">
                <vxe-column type="seq" width="20"></vxe-column>
                <vxe-column field="name" width="80" title="设备名称"></vxe-column>
                <vxe-column field="sex" width="80" title="工作模式"></vxe-column>
                <vxe-column field="age1" width="60" title="订单"></vxe-column>
                <vxe-column field="age2" width="80" title="计划产出"></vxe-column>
                <vxe-column field="age3" width="60" title="完成（%）"></vxe-column>
                <vxe-column field="age4" width="80" title="已完成"></vxe-column>
                <vxe-column field="age5" width="60" title="废品"></vxe-column>
                <vxe-column field="age6" min-width="80" title="停工时长"></vxe-column>
              </vxe-table>
            </div>
          </td>

          <td>
            <div class="area">
              <div class="title">利用率</div>
              <div>
                <div style="display: inline-block; width: 65%">
                  <div style="margin-bottom: 10px; height: 200px" id="weekUsePencent">最近一周机器利用总率</div>
                  <div style="height: 200px" id="yearUsePencent">最近一年机器利用总率</div>
                </div>
                <div style="display: inline-block; width: 35%">
                  <div style="height: 400px" id="weekMachinePencent">最近一周各机器利用率</div>
                </div>
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td>
            <div class="area">
              <div class="title">废品率</div>
              <div>
                <div style="display: inline-block; width: 50%">
                  <div style="height: 200px" id="weekWastePencent">最近一周产品废品率TOP10(%)</div>
                </div>
                <div style="display: inline-block; width: 50%">
                  <div style="height: 200px" id="weekWasteReasonPencent">最近一周原因废品率TOP10(%))</div>
                </div>
              </div>
              <div>
                <div style="display: inline-block; width: 50%">
                  <div style="height: 200px" id="weekWastePencentSUM">最近一周废品率(%)</div>
                </div>
                <div style="display: inline-block; width: 50%">
                  <div style="height: 200px" id="yearWastePencentSUM">最近12个月废品率(%)</div>
                </div>
              </div>
            </div>
          </td>
          <td>
            <div class="area">
              <div class="title">OEE</div>
              <div style="width: 100%">
                <div style="display: inline-block; width: 25%"><div style="height: 200px" id="machineOEE">设备综合效率</div></div>
                <div style="display: inline-block; width: 25%"><div style="height: 200px" id="performanceEfficiency">性能效率</div></div>
                <div style="display: inline-block; width: 25%"><div style="height: 200px" id="TimeOperationRate">时间开动率</div></div>
                <div style="display: inline-block; width: 25%"><div style="height: 200px" id="QualificationRate">合格率</div></div>
              </div>
              <div style="width: 100%">
                <div style="display: inline-block; width: 50%"><div style="height: 200px" id="MayOEESUM">5月每天OEE</div></div>
                <div style="display: inline-block; width: 50%"><div style="height: 200px" id="AnnualOee">每年的OEE</div></div>
              </div>
            </div>
          </td>
        </tr>
      </table>
    </div>
  </div>
</template>

<script>
import titleBar from './titleBar.vue'

export default {
  name: 'test1',
  data() {
    return {
      tableData: [
        { name: 'Test1', sex: 'nv', age1: 28, age2: 28, age3: 28, age4: 28, age5: 28, age6: 28 },
        { name: 'Test1', sex: 'nv', age1: 28, age2: 28, age3: 28, age4: 28, age5: 28, age6: 28 },
        { name: 'Test1', sex: 'nv', age1: 28, age2: 28, age3: 28, age4: 28, age5: 28, age6: 28 },
        { name: 'Test1', sex: 'nv', age1: 28, age2: 28, age3: 28, age4: 28, age5: 28, age6: 28 },
        { name: 'Test1', sex: 'nv', age1: 28, age2: 28, age3: 28, age4: 28, age5: 28, age6: 28 },
      ],
    }
  },
  components: {
    titleBar,
  },
  mounted() {
    this.weekUsePecentInit(),
      this.yearUsePencentInit(),
      this.weekMachinePencentInit(),
      this.weekWastePencentInit(),
      this.weekWasteReasonPencentInit(),
      this.weekWastePencentSUMInit(),
      this.yearWastePencentSUMInit(),
      this.MayOEESUMInit(),
      this.machineOEEInit(),
      this.TimeOperationRateInit(),
      this.QualificationRateInit(),
      this.performanceEfficiencyInit(),
      this.AnnualOeeInit()
  },
  methods: {
    //todo   最近一周机器利用总率  折线
    weekUsePecentInit() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('weekUsePencent'), 'light ')
      window.addEventListener('resize', function () {
        myChart.resize()
      })
      // 指定图表的配置项和数据
      let option = {
        textStyle: { fontFamily: 'Microsoft YaHei', fontSize: '12', fontStyle: 'norma', lfontWeight: 'normal' },
        title: {
          text: '最近一周机器利用总率',
          left: '30%',
        },
        xAxis: {
          data: ['周一', '周二', '周三', '周四', '周四', '周五', '周六', '周日'],
          boundaryGap: false,
        },
        yAxis: {},
        series: [
          {
            data: [0, 0, 0, 31, 32, 27, 52],
            type: 'line',
            smooth: true,
            areaStyle: {
              opacity: 0.8,
              color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: '#005594',
                },
                {
                  offset: 1,
                  color: 'rgb(77, 119, 255)',
                },
              ]),
            },
          },
        ],
      }
      myChart.setOption(option)
    },
    //todo  最近一年机器利用率  折线
    yearUsePencentInit() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('yearUsePencent'), 'light ')
      window.addEventListener('resize', function () {
        myChart.resize()
      })
      // 指定图表的配置项和数据
      let option = {
        textStyle: { fontFamily: 'Microsoft YaHei', fontSize: '12', fontStyle: 'norma', lfontWeight: 'normal' },
        boundaryGap: false,
        title: {
          text: '最近一年机器利用总率',
          left: '30%',
        },
        xAxis: {
          data: ['周一', '周二', '周三', '周四', '周四', '周五', '周六', '周日'],
        },
        yAxis: {},
        series: [
          {
            data: [0, 0, 0, 31, 32, 27, 52],
            type: 'line',
            smooth: true,
            areaStyle: {
              opacity: 0.8,
              color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: '#005594',
                },
                {
                  offset: 1,
                  color: 'rgb(77, 119, 255)',
                },
              ]),
            },
          },
        ],
      }
      myChart.setOption(option)
    },
    //todo 最近一周各机器利用率  柱状图
    weekMachinePencentInit() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('weekMachinePencent'), 'light ')

      window.addEventListener('resize', function () {
        myChart.resize()
      })
      let option = {
        title: {
          text: '最近一周各机器利用率',
          left: '30%',
        },
        color: ['#005594'],
        textStyle: { fontFamily: 'Microsoft YaHei', fontSize: '12', fontStyle: 'norma', lfontWeight: 'normal' },

        xAxis: {
          type: 'value',
        },
        yAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        },
        series: [
          {
            data: [20, 30, 50, 80, 70, 100, 30],
            type: 'bar',
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(180, 180, 180, 0.2)',
            },
          },
        ],
      }

      myChart.setOption(option)
    },
    //todo 最近一周产品废品率TOP10(%)  柱状图
    weekWastePencentInit() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('weekWastePencent'), 'light ')

      window.addEventListener('resize', function () {
        myChart.resize()
      })
      let option = {
        textStyle: { fontFamily: 'Microsoft YaHei', fontSize: '12', fontStyle: 'norma', lfontWeight: 'normal' },
        title: {
          text: '最近一周产品废品率TOP10(%)',
        },
        xAxis: {
          type: 'value',
          splitLine: {
            show: false,
          },
        },
        yAxis: {
          type: 'category',
          data: ['Mon111111111111', 'Tue111111111', 'Wed1111111', 'Thu1111111', 'Fri111111111', 'Sat', 'Sun'],
          boundaryGap: false,
        },
        series: [
          {
            data: [
              {
                value: 40,
                itemStyle: {
                  color: '#d619bd ',
                },
              },
              {
                value: 10,
                itemStyle: {
                  color: '#a90000',
                },
              },
              {
                value: 20,
                itemStyle: {
                  color: '#31eaea',
                },
              },
              {
                value: 110,
                itemStyle: {
                  color: '#31eaea',
                },
              },
              {
                value: 80,
                itemStyle: {
                  color: '#31eaea',
                },
              },
              {
                value: 100,
                itemStyle: {
                  color: '#a90000',
                },
              },
              {
                value: 20,
                itemStyle: {
                  color: '#a90000',
                },
              },
            ],
            type: 'bar',
          },
        ],
      }

      myChart.setOption(option)
    },
    //todo 最近一周原因废品率TOP10(%)  柱状图
    weekWasteReasonPencentInit() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('weekWasteReasonPencent'), 'light ')
      window.addEventListener('resize', function () {
        myChart.resize()
      })
      let option = {
        textStyle: { fontFamily: 'Microsoft YaHei', fontSize: '12', fontStyle: 'norma', lfontWeight: 'normal' },
        title: {
          text: '最近一周原因废品率TOP10(%)',
        },
        xAxis: {
          type: 'value',
          splitLine: {
            show: false,
          },
        },
        yAxis: {
          type: 'category',
          data: ['Mon111111111111', 'Tue111111111', 'Wed1111111', 'Thu1111111', 'Fri111111111', 'Sat', 'Sun'],
          boundaryGap: false,
        },
        series: [
          {
            data: [
              {
                value: 40,
                itemStyle: {
                  color: '#d619bd ',
                },
              },
              {
                value: 10,
                itemStyle: {
                  color: '#a90000',
                },
              },
              {
                value: 20,
                itemStyle: {
                  color: '#31eaea',
                },
              },
              {
                value: 110,
                itemStyle: {
                  color: '#31eaea',
                },
              },
              {
                value: 80,
                itemStyle: {
                  color: '#31eaea',
                },
              },
              {
                value: 100,
                itemStyle: {
                  color: '#a90000',
                },
              },
              {
                value: 20,
                itemStyle: {
                  color: '#a90000',
                },
              },
            ],
            type: 'bar',
          },
        ],
      }

      myChart.setOption(option)
    },
    //todo 最近一周废品率(%)  折线图
    weekWastePencentSUMInit() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('weekWastePencentSUM'), 'light ')
      window.addEventListener('resize', function () {
        myChart.resize()
      })
      // 指定图表的配置项和数据
      let option = {
        textStyle: { fontFamily: 'Microsoft YaHei', fontSize: '12', fontStyle: 'norma', lfontWeight: 'normal' },
        title: {
          text: '最近一周机器利用总率',
          left: '30%',
        },
        xAxis: {
          data: ['周一', '周二', '周三', '周四', '周四', '周五', '周六', '周日'],
          boundaryGap: false,
        },
        yAxis: {},
        series: [
          {
            data: [0, 0, 0, 31, 32, 27, 52],
            type: 'line',
            smooth: true,
            areaStyle: {
              opacity: 0.8,
              color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: '#005594',
                },
                {
                  offset: 1,
                  color: 'rgb(77, 119, 255)',
                },
              ]),
            },
          },
        ],
      }
      myChart.setOption(option)
    },

    //todo 最近12个月废品率(%) 折线图
    yearWastePencentSUMInit() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('yearWastePencentSUM'), 'light ')
      window.addEventListener('resize', function () {
        myChart.resize()
      })
      // 指定图表的配置项和数据
      let option = {
        textStyle: { fontFamily: 'Microsoft YaHei', fontSize: '12', fontStyle: 'norma', lfontWeight: 'normal' },
        title: {
          text: '最近12个月废品率(%)',
          left: '30%',
        },
        xAxis: {
          data: ['周一', '周二', '周三', '周四', '周四', '周五', '周六', '周日'],
          boundaryGap: false,
        },
        yAxis: {},
        series: [
          {
            data: [0, 0, 0, 31, 32, 27, 52],
            type: 'line',
            smooth: true,
            areaStyle: {
              opacity: 0.8,
              color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: '#005594',
                },
                {
                  offset: 1,
                  color: 'rgb(77, 119, 255)',
                },
              ]),
            },
          },
        ],
      }
      myChart.setOption(option)
    },
    //todo 设备综合效率  饼图
    machineOEEInit() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('machineOEE'), 'light ')
      window.addEventListener('resize', function () {
        myChart.resize()
      })
      // 指定图表的配置项和数据
      let option = {
        textStyle: { fontFamily: 'Microsoft YaHei', fontSize: '12', fontStyle: 'norma', lfontWeight: 'normal' },
        title: {
          text: '设备综合效率',
          left: '40%',
        },
        tooltip: {
          trigger: 'item',
        },
        color: ['#005594', '#fff'],

        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center',
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: 'bold',
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 1048, name: 'sucess' },
              { value: 40, name: 'fail' },
            ],
          },
        ],
      }
      myChart.setOption(option)
    },
    //todo 性能效率 饼图
    performanceEfficiencyInit() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('performanceEfficiency'), 'light ')
      window.addEventListener('resize', function () {
        myChart.resize()
      })
      // 指定图表的配置项和数据
      let option = {
        textStyle: { fontFamily: 'Microsoft YaHei', fontSize: '12', fontStyle: 'norma', lfontWeight: 'normal' },
        title: {
          text: '设备综合效率',
          left: '40%',
        },
        tooltip: {
          trigger: 'item',
        },
        color: ['#005594', '#fff'],

        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center',
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: 'bold',
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 1048, name: 'sucess' },
              { value: 40, name: 'fail' },
            ],
          },
        ],
      }
      myChart.setOption(option)
    },
    //todo  时间开动率 饼图
    TimeOperationRateInit() {
      let myChart = this.$echarts.init(document.getElementById('TimeOperationRate'), 'light ')
      window.addEventListener('resize', function () {
        myChart.resize()
      })
      // 指定图表的配置项和数据
      let option = {
        textStyle: { fontFamily: 'Microsoft YaHei', fontSize: '12', fontStyle: 'norma', lfontWeight: 'normal' },
        title: {
          text: '时间开动率',
          left: '40%',
        },
        tooltip: {
          trigger: 'item',
        },
        color: ['#005594', '#fff'],

        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center',
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: 'bold',
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 1048, name: 'sucess' },
              { value: 40, name: 'fail' },
            ],
          },
        ],
      }
      myChart.setOption(option)
    },

    //todo  合格率  饼图
    QualificationRateInit() {
      let myChart = this.$echarts.init(document.getElementById('QualificationRate'), 'light ')
      window.addEventListener('resize', function () {
        myChart.resize()
      })
      // 指定图表的配置项和数据
      let option = {
        textStyle: { fontFamily: 'Microsoft YaHei', fontSize: '12', fontStyle: 'norma', lfontWeight: 'normal' },
        title: {
          text: '时间开动率',
          left: '40%',
        },
        tooltip: {
          trigger: 'item',
        },
        color: ['#005594', '#fff'],

        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center',
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: 'bold',
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 1048, name: 'sucess' },
              { value: 40, name: 'fail' },
            ],
          },
        ],
      }
      myChart.setOption(option)
    },

    //todo 5月每天OEE 折线图
    MayOEESUMInit() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('MayOEESUM'), 'light ')
      window.addEventListener('resize', function () {
        myChart.resize()
      })
      // 指定图表的配置项和数据
      let option = {
        textStyle: { fontFamily: 'Microsoft YaHei', fontSize: '12', fontStyle: 'norma', lfontWeight: 'normal' },
        title: {
          text: '5月每天OEE',
          left: '30%',
        },
        xAxis: {
          data: ['周一', '周二', '周三', '周四', '周四', '周五', '周六', '周日'],
          boundaryGap: false,
        },
        yAxis: {},
        series: [
          {
            data: [0, 0, 0, 31, 32, 27, 52],
            type: 'line',
            smooth: true,
            areaStyle: {
              opacity: 0.8,
              color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: '#005594',
                },
                {
                  offset: 1,
                  color: 'rgb(77, 119, 255)',
                },
              ]),
            },
          },
        ],
      }
      myChart.setOption(option)
    },
    //todo 每年的OEE率
    AnnualOeeInit() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('AnnualOee'), 'light ')
      window.addEventListener('resize', function () {
        myChart.resize()
      })
      // 指定图表的配置项和数据
      let option = {
        textStyle: { fontFamily: 'Microsoft YaHei', fontSize: '12', fontStyle: 'norma', lfontWeight: 'normal' },
        title: {
          text: '每年的OEE率',
          left: '30%',
        },
        xAxis: {
          type: 'category',
          data: ['1', '2', '3', '4', '5'],
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            data: [
              {
                value: 20,
                itemStyle: {
                  color: 'red',
                },
              },

              {
                value: 30,
                itemStyle: {
                  color: 'orange',
                },
              },
              {
                value: 200,
                itemStyle: {
                  color: 'yellow',
                },
              },
              {
                value: 40,
                itemStyle: {
                  color: 'green',
                },
              },
              {
                value: 50,
                itemStyle: {
                  color: 'blue',
                },
              },
            ],
            type: 'bar',
          },
        ],
      }
      myChart.setOption(option)
    },

    //todo  表
    getcolHeader() {
      return 'colHeader'
    },
    getRow() {
      return 'rowColor'
    },
  },
}
</script>

<style rel="stylesheet/scss" lang="scss">
.test1 {
  .header {
    background-color: #005594;
    .title {
      font-size: 20px;
      color: #fff;
      margin-left: 30px;
    }
  }
  .body {
    table {
      width: 100%;
      height: 100%;
      background: #f3f4fa;
    }
    td {
      width: 50%;
    }
    .area {
      margin: 5px;
      height: 420px;
      background-color: #fff;
    }

    .title {
      color: #fff;
      background: #005594;
      font-size: 10px;
      padding-left: 10px;
    }
    .colHeader {
      background-color: #005594;
      color: #fff;
    }
    .rowColor {
      background-color: #6bb4a3;
      color: #000;
    }
  }
  .title_icon {
    margin: 0 auto;
    width: 45%;
    height: 45px;
  }
}
</style>
